<template>
  <view class="contain">
	  <!-- 广告轮播图 -->
	  <view class="h-auto overflow-hidden">
		  <u-swiper :height="200" :list="swiperList.data" :indicator="true" @click="swiperClick" imgMode="scaleToFill"></u-swiper>
	  </view>
	  <!-- 搜索 -->
	  <view class="w-[100%] flex justify-center items-center search">
		  <view class="w-[60%] m-auto my-2">
			  <u-search @click="GoUrl('../search/search')" placeholder="输入产品关键词" disabled="" borderColor="#e1e1e1" inputAlign="center" bgColor="#fff" :showAction="false" v-model="keyword"></u-search>
		 </view>
	  </view>
	  <!-- 产品分类 -->
	  <view class="grid grid-cols-4 gap-2 place-content-start p-2 produtclass">
			<view class="boxView" v-for="(item,index) in classifyData.data" :key="index" @click="openUrl('../class/class',index,item.firstclass,item.id)" >
				<view class="fimg">
					<u--image width="123rpx" height="125rpx" :src="item.firstphotoface" mode="aspectFit"></u--image>
				</view>
				<view class="fword">{{item.firstclass}}</view>
			</view>
	  </view>
	  <!-- 产品推荐 -->
	  <view class="w-[100%]">
		  <view><u--image width="750rpx" height="361rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/56db0bd9ddacbb42daafae89bd708f33.jpg" mode="aspectFit"></u--image></view>
	  </view>
	 <!-- 两张图片 -->
	 <view class="leftRight">
			<view class="imageView">
				<u--image width="360rpx" height="240rpx" src="https://zzwj.cc/web/uploads/mall1/20211227/8cd5901807b67117811587a4d72ecf37.jpg"></u--image>
			</view>
			<view class="imageView">
				<u--image width="360rpx" height="240rpx" src="https://zzwj.cc/web/uploads/mall1/20211227/3ca55f43a2fd0747df4c565bf59f179e.jpg"></u--image>
			</view> 
	 </view>	  
	  
	  
	 <view class="leftmidRight">
		<view class="left flex justify-start items-center w-[42%] h-[365rpx] overflow-hidden">
			<u--image width="300rpx" height="361rpx" src="https://zzwj.cc/web/uploads/mall1/20210829/db8ea0506e7dee235a2f3c48164f99db.jpg" mode="aspectFit"></u--image>
		</view>
		<view class="right flex flex-col justify-between w-[58%]">
			<view class="flex justify-center items-center h-[190rpx] overflow-hidden relative right-1">
				<u--image width="450rpx" height="185rpx" src="https://zzwj.cc/web/uploads/mall1/20210829/8b6d61201dcb4f9368d8c5cb3096afea.jpg" mode="heightFx"></u--image>
			</view>
			<view class="flex justify-center items-center h-[190rpx] overflow-hidden relative -top-2 right-1">
				<u--image width="450rpx" height="185rpx" src="https://zzwj.cc/web/uploads/mall1/20210829/1b0cf4937083dfd19c12e6e255150ead.jpg" mode="heightFx"></u--image>
			</view>
		</view>
	 </view>
	 
	 
	 <view class="fourBoard">
			<view class="fourView">
				<u--image width="360rpx" height="187rpx" src="https://zzwj.cc/web/uploads/mall1/20210902/42d262d60bd91c3122128ef265ce1c86.jpg"></u--image>
			</view>
			<view class="fourView">
				<u--image width="360rpx" height="187rpx" src="https://zzwj.cc/web/uploads/mall1/20210902/c874fd16b9f580d828a5bcd7bc8c10eb.jpg"></u--image>
			</view>
			 <view class="fourView">
				<u--image width="360rpx" height="187rpx" src="https://zzwj.cc/web/uploads/mall1/20210902/2deec394db339755ea4b27030b5dbf03.jpg"></u--image>
			 </view>
			 <view class="fourView">
				<u--image width="360rpx" height="187rpx" src="https://zzwj.cc/web/uploads/mall1/20210902/401552b2c30bac66fc3005ff6334007f.jpg"></u--image>
			 </view> 
	 </view>
	 
	 <!-- 九宫格 -->
	 <view class="Night">
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/ef9b2ec74cf7fda88dde3cc261c01db7.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/860132b64108d11f79ffc61de53d2fa1.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/adbc1003f302abee7e751ffa86f40f5f.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/35d6809a2555580f9f07b6caa0626fdc.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/2b7f9067c787d3939f399a498de6070c.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/28bb1726cb0634398c6ef184a534d30f.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/b64818376f66a4cf821803fa7cfcd2bc.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/45996d9113af73524cdc955e2cb0ef21.jpg"></u--image>
		</view>
		<view class="gridbg">
			<u--image width="250rpx" height="241rpx" src="https://zzwj.cc/web/uploads/mall1/20210901/daad9f2adee7f7ae644c9b900c41f50b.jpg"></u--image>
		</view>
	 </view>
	 
	 <!-- 产品列表 -->
	 <Aproduct></Aproduct>
	 
	 
	 <!-- 联系电话 -->
	 <view class="w-[100%] contact">
		 <view class="bodyshow">
			 <view class="w-[400rpx] p-2 text-white blod text-xl tracking-widest drop-shadow-orange text-center btitle">联系电话</view>
			 <view class="mt-6 cdatas p-1">
				 <u-parse :content="content"></u-parse>
			 </view>
		</view>
	 </view>
  </view>
  
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import { GoUrl } from '@/utils/utils'
import { classStore } from '@/stores/classStore'	
import { getFirst,getContact,readSwiperData } from '@/utils/apiFunction'	
import {  onLoad } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
const store = userStore()

const classstore = classStore();
let swiperList=reactive({data:[
		'https://zzwj.cc/web/uploads/mall1/20210831/11157c2d6a4882c1c4052358674e8638.jpg',
		'https://zzwj.cc/web/uploads/mall1/20210903/327b4dc39e3d77c2a6ebdd2eca28180b.jpg',
		'https://zzwj.cc/web/statics/img/app/bonus/banner.png',
]})
let swiperOriginDatas=reactive({data:[]})
let keyword=ref('');
let content=ref(
	"<p style='color:#ff6600;'>广州市 天河区 188-6864-1049  话务：2900509</p>"+
	"<p style='margin-top:20rpx;color:#ff6600;'>公司地址: xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>"+
	"<p style='margin-top:50rpx; color:#ff6600;'>深圳市 罗湖区 155-7777-8889  话务：2922336</p>"+
	"<p style='margin-top:20rpx;color:#ff6600;'>公司地址: xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>"
)

//产品类信息
let classifyData=reactive<any>({data:[]});  //添加多一层data:[]包裹，预防动态组件不渲染
//餐品信息
let productsData=reactive<any>({data:[]});

//轮播图点击事件
const swiperClick=(index:any)=>{
	console.log("index: ",swiperList.data[index]);
	console.log("index完成数据:",swiperOriginDatas.data[index])
	let wxHref=swiperOriginDatas.data[index].wxhref;
	if(wxHref!=null){
		if(wxHref.indexOf("index/index")!=-1 || wxHref.indexOf("class/class")!=-1 || wxHref.indexOf("cart/cart")!=-1 || wxHref.indexOf("mine/mine")!=-1){
			console.log("跳转地址:",wxHref);
			store.backRouter="../index/index";
			GoUrl(wxHref,2);
			return;
		}
		GoUrl(wxHref);
	}
}

onLoad(async ()=>{
	//获取主类
	await getFirst().then(res=>{
		//console.log("第一分类",res)
		if(res.data.code===200){
			classifyData.data=res.data.data;
		}
	}); 
	
	
	getContact().then(res=>{
		console.log("获取联系方式",res);
		if(res.data.code===200){
			content.value=res.data.data.content;
		}
	});
	
	readSwiperData({}).then(res=>{
		console.log("获取轮播图",res);
		if(res.data.code===200){
			swiperOriginDatas.data=res.data.swiperimgLists;
			if(res.data.swiperimgLists.length>0){
				swiperList.data=[];
				res.data.swiperimgLists.forEach(item=>{
					swiperList.data.push(item.adhref)
				});
			}
		}
	});
	
});

const openUrl=(url:string,index:number,cname:string,firstClassid:number)=>{ 
	classstore.classId=firstClassid;
	classstore.classIndex=index;
	classstore.className=cname; //cname=管槽/网管 -- pinia持久化保存
	GoUrl(url,2)
}
</script>

<style lang="scss" scoped>
	@import "index.scss";
	.u-content {
	        padding: 24rpx;
	        font-size: 32rpx;
	        color: #000;
	        line-height: 1.6;
	}	
</style>
